<template>
  <div class="comment-item">
    <div class="avatar"><img :src="QNURL + data.userAvatar" alt="" /></div>
    <div class="comment-info">
      <div class="name">
        <span>{{ userNickText }}</span>
        <span
          v-if="replyUserTextShow"
          style="font-size: 13px; color: #8a919f; margin: 0 10px"
          >回复</span
        >
        <span v-if="replyUserTextShow">{{ toUserNickText }}</span>
      </div>
      <div class="content">{{ data.content }}</div>
      <div class="op">
        <span>{{ data.createTime }}</span>
        <span v-if="userInfo.userId != data.userId" @click="replyBtnHandle">{{
          replyText
        }}</span>
      </div>
      <Comment v-if="commentSendShow" @sendBtn="sendBtn" />
      <!-- 用于放二级评论 -->
      <slot name="comment" class="second-comment" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { toRefs, computed } from "vue";
import Comment from "@/components/comment/Comment.vue";
import { useUserStoreHook } from "@/store/modules/user";
import { QNURL } from "@/config/urlConfig";

const userStore = useUserStoreHook();

const userInfo = computed(() => userStore.userInfo);

const emit = defineEmits(["replyBtnHandle", "sendBtn"]);

const props = defineProps({
  data: {
    type: Object as () => any,
    required: true
  },
  commentIndex: {
    type: String,
    default: ""
  },
  currentCommentIndex: {
    type: String,
    default: ""
  },
  fatherUserId: {
    type: String,
    default: ""
  },
  // 头像
  avatar: {
    type: String,
    default: ""
  },
  // 头像大小
  avatarSize: {
    type: String,
    default: "40px"
  },
  // 昵称
  name: {
    type: String,
    default: ""
  }
});

const { avatarSize, data, commentIndex, currentCommentIndex, fatherUserId } =
  toRefs(props);

function replyBtnHandle() {
  emit("replyBtnHandle", commentIndex.value);
}

function sendBtn(val: string) {
  emit("sendBtn", val, data.value);
}

const replyText = computed(() =>
  currentCommentIndex.value && currentCommentIndex.value == commentIndex.value
    ? "取消回复"
    : "回复"
);

const replyUserTextShow = computed(
  () => fatherUserId.value != data.value.toUserId && data.value.rootCommentId
);

const commentSendShow = computed(
  () => commentIndex.value == currentCommentIndex.value
);

const userNickText = computed(() =>
  data.value.userId == userInfo.value.userId ? "我" : data.value.nickName
);

const toUserNickText = computed(() =>
  data.value.toUserId == userInfo.value.userId ? "我" : data.value.toNickName
);
</script>

<style lang="scss" scoped>
.comment-item {
  width: 100%;
  display: flex;

  &:last-child {
    .comment-info {
      border: none;
    }
  }

  .avatar {
    width: v-bind(avatarSize);
    height: v-bind(avatarSize);
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .comment-info {
    flex: 1;
    border-bottom: 1px dashed #ccc;
    // padding-bottom: 10px;
    margin-bottom: 10px;
  }
}

.name {
  width: 100%;
  font-size: 14px;
  color: #333;

  span {
    font-weight: bold;
  }
}

.content {
  min-height: 40px;
  line-height: 30px;
  border-radius: 5px;
  background-color: #f7f7f7;
  color: #333;
  margin: 10px 0;
  font-size: 16px;
  padding: 10px;
}

.op {
  margin-bottom: 10px;

  span {
    font-size: 13px;
    color: #999999;
    cursor: pointer;
    margin-right: 20px;
  }
}

.second-comment {
  padding-left: 50px;
}
</style>
